<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>制作水波扩散效果</title>
  <style>
    .ball {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      position: relative;
      transform: translateY(-30px);
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: aliceblue;
    }

    .ball>.ball-item {
      /*设置水波纹的样式*/
      background-color: #279fcf;
      border-radius: 100%;
      margin: 2px;
      position: absolute;
      opacity: 0;
      width: 60px;
      height: 60px;
      animation: waterRipple 1s 0s linear infinite both;
      z-index: -1;
    }

    .ball>.ball-item:nth-child(2) {
      /*设置动画延迟*/
      animation-delay: 0.2s;
    }

    .ball>.ball-item:nth-child(3) {
      animation-delay: 0.4s;
    }

    .ball>.ball-item:nth-child(4) {
      animation-delay: 0.6s;
    }

    @keyframes waterRipple {
      0% {
        transform: scale(0);
        opacity: 0;
      }

      5% {
        opacity: 1;
      }

      100% {
        transform: scale(1);
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div class="ball">
    福
    <div class="ball-item"></div>
    <div class="ball-item"></div>
    <div class="ball-item"></div>
    <div class="ball-item"></div>
  </div>
</body>

</html>